<template>
  <div class="cancel_table">
    <van-sticky class="sticky">
      <van-nav-bar
        title="核销报表"
        left-arrow
        @click-left="goBack()"
        class="top_bar"
      />
      <van-tabs v-model="activeTab" class="tabs" @click="changeTab">
        <van-tab v-for="item in tabList" :key="item" :title="item" />
      </van-tabs>
      <div class="top_border_20"></div>
      <div class="ticket_type" v-show="ticket_type[activeTab].length > 0">
        <div
          :class="['type', typeActive == index ? 'active' : '']"
          @click="changeChild(index)"
          v-for="(item, index) in ticket_type[activeTab]"
          :key="index"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="ticket_num" v-show="activeTab != 4 && !showLoading">
        {{ totalTxt }}
      </div>
      <div class="type4_title" v-show="activeTab == 4 && !showLoading">
        <div
          v-for="(item, index) in ['批次号', '卡券名称', '核销数']"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </van-sticky>
    <div class="content_list">
      <div class="noInfo loading" v-show="showLoading">
        <img src="../../../assets/img/flow/loading.gif" class="img" alt />
      </div>
      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        :disabled="finished"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="dataList.length > 0 ? '没有更多了' : ''"
          @load="onLoad"
        >
          <template v-if="dataList.length > 0">
            <div
              v-for="(item, index) in dataList"
              :key="index"
              class="list"
              @click="toDetail(item)"
            >
              <ticketStatement
                :type="activeTab"
                :childActive="typeActive"
                :dataObj="item"
              />
            </div>
          </template>
          <template v-else>
            <van-empty
              class="custom-image"
              :image="emptyImg"
              description="暂无数据"
            />
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import ticketStatement from "./components/ticketStatement.vue";
import { getProtList, getProtSum, getStatisticDataVo } from "@/api/cancelReport";
import { mapGetters } from "vuex";
export default {
  name: "cancelStatement",
  components: {
    ticketStatement,
  },
  computed: {
    ...mapGetters(["dateType", "keepLiveArr"]),
  },
  data() {
    return {
      // tab活动值
      activeTab: 0,
      // 子类筛选
      typeActive: 0,
      // tabs列表
      tabList: ["券核销", "卡核销", "预订核销", "自提核销", "核销统计"],
      // 数据列表
      dataList: [],
      // 优惠券类型
      ticket_type: {
        0: [
          { title: "代金券", type: "cash" },
          { title: "折扣券", type: "discount" },
          { title: "兑换券", type: "exchange" },
        ],
        1: [
          { title: "礼品卡", type: "gift" },
          { title: "次卡", type: "times" },
        ],
        2: [],
        3: [],
        4: [
          { title: "代金券", type: "cash" },
          { title: "折扣券", type: "discount" },
          { title: "兑换券", type: "exchange" },
        ],
      },
      emptyImg: require("@/assets/img/empty-data.png"),
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
	  totalTxt:"",
      queryParams: {
        pageSize: 20,
        // 默认是优惠券
        type: "COUPON",
        pageNum: 0,
        shopId: "",
        subType: "cash",
        dataType: "",
      },
      showLoading: false,
    };
  },
  created() {
    this.queryParams.shopId = JSON.parse(
      localStorage.getItem("Urldata")
    ).shopId;
    this.showLoading = true
  },
  methods: {
    //   优惠券类型切换
    changeChild(index) {
      this.queryParams.subType = this.ticket_type[this.activeTab][index].type;
      this.typeActive = index;
      this.resetLoad();
    },
    // tabs的切换
    changeTab(index) {
		this.activeTab = index
      let { activeTab, ticket_type } = this;
      ticket_type[activeTab] &&
      ticket_type[activeTab][0] &&
      ticket_type[activeTab][0].type
        ? this.changeChild(0)
        : (this.typeActive = "");
      if (ticket_type[activeTab] && ticket_type[activeTab][0] == undefined) {
        this.resetLoad();
      }
	  this.activeTab = index
    },
    onLoad() {
      this.queryParams.pageNum++;
      setTimeout(() => {
        if (this.refreshing) {
          this.queryParams.pageNum = 1;
          this.dataList = [];
          this.refreshing = false;
        }
        this.getData();
      }, 100);
    },
    resetLoad() {
      // this.finished = false;
      this.showLoading = true
      this.dataList = [];
      this.refreshing = true;
      this.onLoad();
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.showLoading = true
      this.onLoad();
    },
    // 获取数据
    getData() {
      let { typeActive, activeTab, queryParams, dateType } = this;
      switch (activeTab) {
        case 0:
          queryParams.type = "COUPON";
          break;
        case 1:
          queryParams.type = "COUPON_CARD";
          break;
        case 2:
          queryParams.type = "BOOKING_ORDER";
          queryParams.subType = "";
          break;
        case 3:
          queryParams.type = "MALL_TAKE_ORDER";
          queryParams.subType = "";
          break;
        case 4:
          queryParams.type = "COUPON";
          break;
      }
      queryParams.dateType = dateType;
      if (activeTab == 4) {
        getProtSum(queryParams).then((result) => {
          let res = result.data;
          if (res.code == 0) {
            let { list, hasNextPage, total } = res.data;
            this.dataList = [...this.dataList, ...list];
            if (!hasNextPage) {
              this.finished = true;
            }
            this.loading = false;
      this.showLoading = false

          } else {
            this.loading = false;
      this.showLoading = false

          }
        });
      } else {
        getProtList(queryParams).then((result) => {
          let res = result.data;
          if (res.code == 0) {
            let { list, total, hasNextPage } = res.data;
            this.dataList = [...this.dataList, ...list];
            if (!hasNextPage) {
              this.finished = true;
            }
            this.loading = false;
            this.showLoading = false
          } else {
            this.loading = false;
            this.showLoading = false
          }
        });
		getStatisticDataVo(queryParams).then((result) => {
			let {total,totalCount,verifyAmount} = result.data.data
			let totalTxt = ''		
			let activeTab = this.activeTab
			let subType = this.queryParams.subType
			if(activeTab === 0){
				totalTxt = `共核销数据${total}笔，${totalCount}张，${verifyAmount/100}元`
			}else if(activeTab === 1){
				if(subType === 'gift'){
					totalTxt = `共核销数据${total}笔，${verifyAmount/100}元`
				}else{
					totalTxt = `共核销数据${total}笔，${verifyAmount}次`
				}
			}else{
				totalTxt = `共核销数据${total}笔，${verifyAmount/100}元`
			}
			this.totalTxt = totalTxt
		})
      }
    },
    goBack() {
      let { keepLiveArr } = this;
      if (keepLiveArr.indexOf("cancelStatement") != -1) {
        keepLiveArr.splice(keepLiveArr.indexOf("cancelStatement"), 1);
        this.$store.commit("setKeepLive", keepLiveArr);
      }
      this.$router.back();
    },
    // 跳转详情
    toDetail(item) {
      let { activeTab, typeActive: childActive, keepLiveArr } = this;
      if (activeTab == 4) return;
      let type, code;
      switch (activeTab) {
        case 0:
          type = "COUPON";
          code = item.serialNo;
          break;
        case 1:
          type = "COUPON_CARD";
          code = item.serialNo;
          break;
        case 2:
          type = "BOOKING_ORDER";
          code = item.orderNo;
          break;
        case 3:
          type = "MALL_TAKE_ORDER";
          code = item.orderNo;
          break;
      }
      this.$router.push({
        path: "/cancelDetail",
        query: { type, code, activeTab, childActive, 'shopId':this.queryParams.shopId },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.cancel_table {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .top_border_20 {
    width: 100%;
    height: 20px;
    background: #f5f5f5;
  }
  .refresh {
    flex: 1;
    // overflow-y: scroll;
    padding-bottom: 50px;
  }
  .sticky {
    /deep/.van-sticky {
      background-color: #fff;
    }

    .tabs {
      /deep/.van-tabs__line {
        background-color: #feaf39 !important;
      }
      /deep/.van-tab--active {
        color: #feaf39;
      }
    }
    .ticket_type {
      padding: 30px 40px 30px;
      display: flex;
      .type {
        border-radius: 25px;
        padding: 12px 26px;
        margin-right: 30px;
        background: #ededed;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
      }
      .active {
        background-color: #feaf39;
        color: #fff;
        border-color: #feaf39 !important;
      }
    }
    .ticket_num {
      padding: 40px 40px 30px;
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #131313;
    }
    .type4_title {
      width: 100%;
      padding: 26px 60px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      background-color: #f7f7f7;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #131313;
      > :first-child,
      > :last-child {
        flex: 1;
      }
      > :nth-child(2) {
        flex: 2;
        word-break: break-all;
      }
    }
  }
  .content_list {
    flex: 1;
    overflow-y: scroll;
    position: relative;
    .noInfo {
      position: sticky;
      top: 0;
      left: 0;
      background-color: white;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 111;
      .img {
        width: 150px;
        height: 150px;
      }
    }
  }
  .list {
    padding: 0 40px;
    .content {
      padding: 20px 0px;
      border-bottom: 1px solid #c1c1c1;
    }
  }
}
</style>